<script setup lang="ts">
const {waterForm, listB} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
  listB: Object;
}>();


const calculateXdbfpc = () => {
  // 遍历 `pxycd` 数组，每 2 个一组进行计算
  for (let i = 0; i < waterForm.pxycd.length; i += 2) {
    const itemA = waterForm.pxycd[i];      // 偶数索引
    const itemB = waterForm.pxycd[i + 1];  // 下一行（奇数索引）

    if (!itemA || !itemB) continue; // 避免数组越界

    const bodA = parseFloat(itemA.px_cdnd);
    const bodB = parseFloat(itemB.px_cdnd);

    // 确保 `px_bod` 都是有效数字，并且分母不为 0
    if (!isNaN(bodA) && !isNaN(bodB) && (bodA + bodB) !== 0) {
      const result = Math.abs(((bodA - bodB) / (bodA + bodB)) * 100); // 取正数
      itemA.px_xdpc = `${result.toFixed(2)}`; // 保留两位小数

      // 计算平均值
      const average = (bodA + bodB) / 2;
      itemA.px_pjz = average.toFixed(2);  // 保留两位小数
      console.log("平均值为:", average);
    } else {
      itemA.px_xdpc = ""; // 如果有缺失值，则不计算
      itemA.px_pjz = "";  // 如果有缺失值，则不计算平均值
    }
  }
};


// 标准
const handleBzyChange = (item) => {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = listB.bzyList.find(
      option => option.extractedContent === item.bz_ypbh
  );

  console.log(selectedOption)

  // 如果找到了对应的选项，则将 finalResult 赋值给 px_phz
  if (selectedOption) {
    item.bz_cdnd = selectedOption.finalResult;
  }
}


// 曲线
const handleQxChange = (item) => {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = listB.qxyList.find(
      option => option.sampleNumber === item.ypbh
  );

  // 如果找到了对应的选项，则将 finalResult 赋值给 px_phz
  if (selectedOption) {
    item.xdwc = selectedOption.finalResult;
  }
}

// 空白
const handleKbyChange = (item) => {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = listB.kbyList.find(
      option => option.sampleNumber === item.kb_ypbh
  );

  // 如果找到了对应的选项，则将 finalResult 赋值给 px_phz
  if (selectedOption) {
    item.kb_cdnd = selectedOption.finalResult;
  }
}

// 平行样
const handlePxyChange = (item) => {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = listB.pxyList.find(
      option => option.sampleNumber === item.px_ypbh
  );

  // 如果找到了对应的选项，则将 finalResult 赋值给 px_phz
  if (selectedOption) {
    item.px_cdnd = selectedOption.finalResult;
  }
}


// 加标
const handleJzyChange = (item) => {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = listB.jbyList.find(
      option => option.sampleNumber === item.jb_ypbh
  );

  // 如果找到了对应的选项，则将 finalResult 赋值给 px_phz
  if (selectedOption) {
    item.jb_bynd = selectedOption.finalResult;
  }
}

</script>
<template>
  <div class="card">
    <el-card class="box-card">
      <h1 style="text-align: center">土壤和沉积物 原子荧光光度法分析原始记录（B面）</h1>
      <div>SXLPHJ/JL/CX-22-94</div>
      <table class="table">
        <tr>
          <td colspan="8">
            <div style="display: flex;align-items: center;justify-content: space-between">
              <div></div>
              <span style="font-size: 18px">标准曲线绘制</span>
              <div style="display: flex;align-items: center;">
                <span style="width: 140px;">绘制日期：</span>
                <el-input style="border: 1px solid #ccc;border-radius: 6px" placeholder="请输入"
                          v-model="waterForm.bdatas.hzrq"></el-input>
              </div>
            </div>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>标准贮备液浓度</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzzbynd"/>
          </td>
          <td>标准贮备液批号</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzzbyph"/>
          </td>
          <td>贮备液有效期</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.zbyyxq"/>
          </td>
        </tr>
        <tr>
          <td>移取贮备液体积</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.yqzbytj"/>
          </td>
          <td>定容体积</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.drtj1"/>
          </td>
          <td>标准中间液浓度</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzzjynd"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>移取中间液体积</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.yqzjytj"/>
          </td>
          <td>定容体积</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.drtj2"/>
          </td>
          <td>标准使用液浓度</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzsyynd"/>
          </td>
        </tr>
        <tr>
          <td>编号</td>
          <td>空白</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>标准加入量（mL）</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.qxhzdatas.bzjrl_1"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.qxhzdatas.bzjrl_2"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.qxhzdatas.bzjrl_3"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.qxhzdatas.bzjrl_4"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.qxhzdatas.bzjrl_5"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model=" waterForm.bdatas.qxhzdatas.bzjrl_6"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model=" waterForm.bdatas.qxhzdatas.bzjrl_7"/>
          </td>
        </tr>
        <tr>
          <td>标准物质浓度(μg/L)</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model=" waterForm.bdatas.qxhzdatas.bzwznd_1"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model=" waterForm.bdatas.qxhzdatas.bzwznd_2"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model=" waterForm.bdatas.qxhzdatas.bzwznd_3"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model=" waterForm.bdatas.qxhzdatas.bzwznd_4"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model=" waterForm.bdatas.qxhzdatas.bzwznd_5"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model=" waterForm.bdatas.qxhzdatas.bzwznd_6"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model=" waterForm.bdatas.qxhzdatas.bzwznd_7"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>校准曲线(y=a+bx)</td>
          <td colspan="7">
            <div style="display: flex;align-items: center;">
              <div style="display: flex;align-items: center;">
                <span style="width: 30px;"> y =</span>
                <el-input v-model="waterForm.bdatas.qxhzdatas.y" placeholder="请输入"></el-input>
              </div>
              <div style="display: flex;align-items: center;">
                <span style="width: 30px;"> r =</span>
                <el-input v-model="waterForm.bdatas.qxhzdatas.r" placeholder="请输入"></el-input>
              </div>
              <div style="display: flex;align-items: center;">
                <span style="width: 30px;"> a =</span>
                <el-input v-model="waterForm.bdatas.qxhzdatas.a" placeholder="请输入"></el-input>
              </div>
              <div style="display: flex;align-items: center;">
                <span style="width: 30px;"> b =</span>
                <el-input v-model="waterForm.bdatas.qxhzdatas.b" placeholder="请输入"></el-input>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <div style="display: flex;align-items: center;">
        <table class="table" style="margin: 0">
          <tr>
            <td colspan="4">标准样品测定</td>
          </tr>
          <tr>
            <td style="width: 200px;">质控样批号</td>
            <td>测定浓度</td>
            <td>标准值</td>
            <td>是否合格</td>
          </tr>
          <tr v-for="(item,index) in waterForm.bzycd" :key="index">
            <td>
              <el-select v-model="item.bz_ypbh" placeholder="请选择"
                         filterable
                         allow-create
                         default-first-option
                         style="width: 100%; border: 1px solid transparent"
                         @change="handleBzyChange(item)">
                <el-option
                    v-for="(option, index) in listB.bzyList"
                    :key="index"
                    :label="option.extractedContent"
                    :value="option.extractedContent">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.bz_cdnd"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.bz_bzz"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.bz_sfhg"/>
            </td>
          </tr>
        </table>
        <table class="table" style="margin: 0">
          <tr>
            <td colspan="4">曲线校核点测定</td>
          </tr>
          <tr>
            <td style="width: 200px;">样品编号</td>
            <td>相对误差</td>
            <td>质控要求</td>
            <td>是否合格</td>
          </tr>
          <tr v-for="(item,index) in waterForm.bdatas.qxjhdcd" :key="index">
            <td>
              <el-select v-model="item.ypbh" placeholder="请选择" style="width: 100%; border: 1px solid transparent"
                         filterable
                         allow-create
                         default-first-option
                         @change="handleQxChange(item)">
                <el-option
                    v-for="(option, index) in listB.qxyList"
                    :key="index"
                    :label="option.sampleNumber"
                    :value="option.sampleNumber">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.xdwc"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.zkyq"/>
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="item.sfhg"/>
            </td>
          </tr>
        </table>
      </div>
      <table class="table">
        <tr>
          <td colspan="8">
            <div class="table-td">
              空白检查
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">样品编号</td>
          <td colspan="2">测定浓度</td>
          <td colspan="2">质控要求</td>
          <td colspan="2">是否合格</td>
        </tr>
        <tr v-for="(item,index) in waterForm.kbycd" :key="index">
          <td colspan="2">
            <el-select v-model="item.kb_ypbh" placeholder="请选择" style="width: 100%; border: 1px solid transparent"
                       filterable
                       allow-create
                       default-first-option
                       @change="handleKbyChange(item)">
              <el-option
                  v-for="(option, index) in listB.kbyList"
                  :key="index"
                  :label="option.sampleNumber"
                  :value="option.sampleNumber">
              </el-option>
            </el-select>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.kb_cdnd"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.kb_zkyq"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.kb_sfhg"/>
          </td>
        </tr>
        <tr>
          <td colspan="8">
            <div class="table-td">
              平行样测定
            </div>
          </td>
        </tr>
        <tr>
          <td style="width: 200px;">样品编号</td>
          <td>
            <div>
              测定浓度(
              <el-input v-model="waterForm.unit.px_cdnd" placeholder="请输入" style="width: 20%;"></el-input>
              )
            </div>
          </td>
          <td>
            <div>
              平均值(
              <el-input v-model="waterForm.unit.px_pjz" placeholder="请输入" style="width: 20%;"></el-input>
              )
            </div>
          </td>
          <td>相对偏差（%）</td>
          <td colspan="2">质控要求（%）</td>
          <td colspan="2">是否合格</td>
        </tr>

        <tr v-for="(item, index) in waterForm.pxycd" :key="index">
          <td>
            <el-select v-model="item.px_ypbh" placeholder="请选择"
                       filterable
                       allow-create
                       default-first-option
                       style="width: 100%; border: 1px solid transparent"
                       @change="handlePxyChange(item)">
              <el-option
                  v-for="(option, index) in listB.pxyList"
                  :key="index"
                  :label="option.sampleNumber"
                  :value="option.sampleNumber">
              </el-option>
            </el-select>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      @blur="calculateXdbfpc"
                      v-model="item.px_cdnd"/>
          </td>

          <!-- 平均值（每两行合并） -->
          <td v-if="index % 2 === 0" :rowspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.px_pjz"/>
          </td>
          <!-- 相对偏差（每两行合并） -->
          <td v-if="index % 2 === 0" :rowspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.px_xdpc"/>
          </td>
          <!-- 质控要求（每两行合并，跨 2 列） -->
          <td v-if="index % 2 === 0" :rowspan="2" colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.px_zkyq"/>
          </td>
          <!-- 是否合格（每两行合并，跨 2 列） -->
          <td v-if="index % 2 === 0" :rowspan="2" colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.px_sfhg"/>
          </td>
        </tr>
        <tr>
          <td colspan="8">
            <div class="table-td">
              加标回收率测定
            </div>
          </td>
        </tr>
        <tr>
          <td>样品编号</td>
          <td>
            <div>
              标液浓度(
              <el-input v-model="waterForm.unit.jb_bynd" placeholder="请输入" style="width: 20%;"></el-input>
              )
            </div>
          </td>
          <td>
            <div>
              加标量(
              <el-input v-model="waterForm.unit.jb_jbl" placeholder="请输入" style="width: 20%;"></el-input>
              )
            </div>
          </td>
          <td>
            <div>
              原样品浓度(
              <el-input v-model="waterForm.unit.jb_yypnd" placeholder="请输入" style="width: 20%;"></el-input>
              )
            </div>
          </td>
          <td>
            <div>
              加标后浓度/含量(
              <el-input v-model="waterForm.unit.jb_jbhbd" placeholder="请输入" style="width: 20%;"></el-input>
              )
            </div>
          </td>
          <td>加标回收率( % )</td>
          <td>质控要求( % )</td>
          <td>是否合格</td>
        </tr>
        <tr v-for="(item,index) in waterForm.jbycd" :key="index">
          <td>
            <el-select v-model="item.jb_ypbh" placeholder="请选择"
                       filterable
                       allow-create
                       default-first-option
                       style="width: 100%; border: 1px solid transparent"
                       @change="handleJzyChange(item)">
              <el-option
                  v-for="(option, index) in listB.jbyList"
                  :key="index"
                  :label="option.sampleNumber"
                  :value="option.sampleNumber">
              </el-option>
            </el-select>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.jb_bynd"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.jb_jbl"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.jb_yypnd"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.jb_jbhnd"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.jb_jbhsl"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.jb_zkyq"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.jb_sfhg"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>备注</td>
          <td colspan="7">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bnotes"/>
          </td>
        </tr>
      </table>
    </el-card>
  </div>
</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
  text-align: center;
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}


.table-td {
  display: flex;
  justify-content: center;
  font-weight: 500;
  color: #303133;
}


::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
  flex-direction: row-reverse;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
